<!-- <template>
  <header class="header">
    <div class="header__container">
      <div class="header__left">
        <h1 class="header__logo">职为你来</h1>
        <div class="header__location">
          <img src="@/assets/wxlg.png" alt="Location" class="header__icon" />
          <span>广州</span>
        </div>
      </div>

      <nav class="header__nav">
        <router-link
          v-for="item in navItems"
          :key="item.text"
          :to="item.link"
          :class="{
            'header__nav-item': true,
            'is-active': currentRoute === item.link
          }"
          class="header__nav-item"
        >
          <img v-if="item.icon" :src="item.icon" alt :class="header__icon" />
          {{ item.text }}
        </router-link>
      </nav>

      <div class="header__right">
        <router-link
          v-for="button in actionButtons"
          :key="button.text"
          :to="button.link"
          class="header__button"
        >
          {{ button.text }}
        </router-link>
        <img
          src="@/assets/wxlg.png"
          alt="Bell"
          class="header__icon header__icon--interactive"
        />
        <img
          src="@/assets/wxlg.png"
          alt="Search"
          class="header__icon header__icon--interactive"
        />
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
// const router = useRouter()

const navItems = [
  { text: '首页', link: '/main/index' },
  { text: '推荐', link: '/recommend/index' },
  { text: '搜索·公司', link: '/search/index' },
  { text: '校园·海归', link: '#' },
  { text: '小程序', link: '/applet/index' },
  { text: '职友AI', link: '/aibot/index' },
  { text: '职星会客厅', link: '/dynamic/index' },
  { text: '知识星辰阁', link: '/learning/index' }
]

const actionButtons = [
  { text: '我要招聘', link: '/login' },
  { text: '我要找工作', link: '/login' },
  { text: '登录/注册', link: '/login' }
]

const currentRoute = computed(() => route.path)
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  color: #ffffff;

  &__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-x: auto;
  }

  &__left,
  &__right {
    display: flex;
    align-items: center;
  }

  &__logo {
    color: #409eff;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 1.5rem;
  }

  &__location {
    display: flex;
    align-items: center;
    color: #409eff;
    cursor: pointer;
    transition: color 0.3s ease;

    &:hover {
      color: #fa9797;
    }
  }

  &__nav {
    display: none;

    @media (min-width: 768px) {
      display: flex;
      gap: 1rem;
    }
  }

  &__nav-item {
    color: #606266;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
    align-items: center;
    // flex: 1 1 auto; /* flex-grow, flex-shrink, flex-basis */
    // min-width: 0; /* 允许元素缩小 */
    // white-space: nowrap; /* 防止文本换行 */
    // overflow: hidden; /* 隐藏溢出的内容 */
    // text-overflow: ellipsis; /* 显示省略号 */

    &:hover {
      color: #409eff;
    }
    &.is-active {
      color: #409eff; /* 高亮颜色 */
    }
  }

  &__button {
    background-color: #ffffff;
    color: #606266;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 1rem;
    text-decoration: none;

    &:hover {
      background-color: #eee;
    }
  }

  &__icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;

    &--interactive {
      color: #606266;
      cursor: pointer;
      transition: color 0.3s ease;
      margin-left: 1rem;

      &:hover {
        color: #ffffff;
      }
    }
  }
}
</style> -->

<!-- <template>
  <header class="header">
    <div class="header__container">
      <div class="header__left">
        <h1 class="header__logo">职为你来</h1>
        <div class="header__location">
          <img src="@/assets/wxlg.png" alt="Location" class="header__icon" />
          <span>广州</span>
        </div>
      </div>

      <span class="header__nav">
        <router-link
          v-for="item in navItems"
          :key="item.text"
          :to="item.link"
          :class="{
            'header__nav-item': true,
            'is-active': currentRoute === item.link
          }"
          @click.native="handleNavLinkClick(item.link)"
        >
          <img v-if="item.icon" :src="item.icon" alt :class="header__icon" />
          {{ item.text }}
        </router-link>
      </span>

      <div class="header__right">
        <router-link
          v-for="button in actionButtons"
          :key="button.text"
          :to="button.link"
          class="header__button"
        >
          {{ button.text }}
        </router-link>
        <img
          src="@/assets/wxlg.png"
          alt="Bell"
          class="header__icon header__icon--interactive"
        />
        <img
          src="@/assets/wxlg.png"
          alt="Search"
          class="header__icon header__icon--interactive"
        />
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const navItems = [
  { text: '首页', link: '/main/index' },
  { text: '推荐', link: '/recommend/index' },
  { text: '搜索·公司', link: '/search/index' },
  { text: '校园·海归', link: '#' },
  { text: '小程序', link: '/applet/index' },
  { text: '职友AI', link: '/aibot/index' },
  { text: '职星会客厅', link: '/dynamic/index' },
  { text: '知识星辰阁', link: '/learning/index' }
]

const actionButtons = [
  { text: '我要招聘', link: '/login' },
  { text: '我要找工作', link: '/login' },
  { text: '登录/注册', link: '/login' }
]

const currentRoute = computed(() => route.path)

const handleNavLinkClick = (link) => {
  // Add your logic here if needed when a nav link is clicked
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  color: #ffffff;

  &__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-x: auto; // Allow horizontal scrolling
  }

  &__left,
  &__right {
    display: flex;
    align-items: center;
  }

  &__logo {
    color: #409eff;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 1.5rem;
  }

  &__location {
    display: flex;
    align-items: center;
    color: #409eff;
    cursor: pointer;
    transition: color 0.3s ease;

    &:hover {
      color: #fa9797;
    }
  }

  &__nav {
    display: flex;

    white-space: nowrap;
  }

  &__nav-item {
    color: #606266;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
    align-items: center;
    flex: 1 1 auto; /* flex-grow, flex-shrink, flex-basis */
    min-width: 0; /* Allow elements to shrink */
    white-space: nowrap; /* Prevent text wrapping */

    &:hover {
      color: #409eff;
    }
    &.is-active {
      color: #409eff; /* Highlight color */
      border-bottom: none; /* Remove underline */
    }
  }

  &__button {
    background-color: #ffffff;
    color: #606266;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 1rem;
    text-decoration: none;

    &:hover {
      background-color: #eee;
    }
  }

  &__icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;

    &--interactive {
      color: #606266;
      cursor: pointer;
      transition: color 0.3s ease;
      margin-left: 1rem;

      &:hover {
        color: #ffffff;
      }
    }
  }
}
</style> -->

<!-- <template>
  <header class="header">
    <div class="header__container">
      <div class="header__left">
        <h1 class="header__logo">职为你来</h1>
        <div class="header__location">
          <img src="@/assets/wxlg.png" alt="Location" class="header__icon" />
          <span>广州</span>
        </div>
      </div>

      <div class="header__nav">
        <router-link
          v-for="item in navItems"
          :key="item.text"
          :to="item.link"
          :class="{
            'header__nav-item': true,
            'is-active': currentRoute === item.link
          }"
        >
          <img v-if="item.icon" :src="item.icon" alt class="header__icon" />
          {{ item.text }}
        </router-link>
      </div>

      <div class="header__right" v-if="!isLogin()">
        <router-link
          v-for="button in actionButtons"
          :key="button.text"
          :to="button.link"
          class="header__button"
        >
          {{ button.text }}
        </router-link>
      </div>
      <div class="header__right" v-else>
        <router-link
          v-for="button in me"
          :key="button.text"
          :to="button.link"
          class="header__button"
        >
          {{ button.text }}
        </router-link>
      </div>
    </div>
  </header>
</template>

<script setup>
import { isLogin } from '@/stores'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const navItems = [
  { text: '首页', link: '/main/index' },
  {
    text: '推荐',
    link: '/recommend/index'
  },
  {
    text: '搜索·公司',
    link: '/search/index'
  },
  { text: '校园·海归', link: '#' },
  { text: '小程序', link: '/applet/index' },
  { text: '职友AI', link: '/aibot/index' },
  {
    text: '职星会客厅',
    link: '/dynamic/index'
  },
  {
    text: '知识星辰阁',
    link: '/learning/index'
  }
]

const actionButtons = [
  { text: '我要招聘', link: '/login' },
  { text: '我要找工作', link: '/login' },
  { text: '登录/注册', link: '/login' }
]
const me = [{ text: '我de', link: '/me' }]

const currentRoute = computed(() => route.path)
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  width: 100%;
  margin: 0;
  padding: 0;
  align-items: center;
  z-index: 1000;

  &__container {
    height: 50px;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: auto;
    white-space: nowrap;
  }

  &__left,
  &__right {
    display: flex;
    align-items: center;
  }

  &__logo {
    color: #409eff;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 1.5rem;
  }

  &__location {
    display: flex;
    align-items: center;
    color: #409eff;
    cursor: pointer;
    transition: color 0.3s ease;
    margin-right: 1rem;

    &:hover {
      color: #fa9797;
    }
  }

  &__nav {
    display: flex;
    gap: 1rem;
    // white-space: nowrap;
    flex-grow: 1; // Allow nav to take up remaining space
  }

  &__nav-item {
    color: #606266;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.3s ease;

    &:hover,
    &.is-active {
      color: #409eff; // Highlight color
    }
  }

  &__button {
    background-color: #ffffff;
    color: #606266;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    // white-space: nowrap;
    text-decoration: none;

    &:hover {
      background-color: #eee;
    }
  }

  &__icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
  }

  &__icon--interactive {
    color: #606266;
    cursor: pointer;
    transition: color 0.3s ease;

    &:hover {
      color: #ffffff;
    }
  }
}
</style> -->

<!-- <template>
  <header class="header">
    <div class="header__container">
      <div class="header__left">
        <h1 class="header__logo">职为你来</h1>
        <div class="header__location" @click="toggleCitySelector">
          <img src="@/assets/wxlg.png" alt="Location" class="header__icon" />
          <span>{{ selectedCity }}</span>
          <div v-if="showCitySelector" class="header__city-selector">
            <div
              v-for="city in cities"
              :key="city"
              @click="selectCity(city)"
              class="header__city-option"
            >
              {{ city }}
            </div>
          </div>
        </div>
      </div>

      <button
        class="header__mobile-toggle"
        @click="toggleMobileMenu"
        aria-label="Toggle menu"
      >
        <span></span>
        <span></span>
        <span></span>
      </button>

      <nav
        class="header__nav"
        :class="{ 'header__nav--open': isMobileMenuOpen }"
      >
        <div class="header__nav-row">
          <router-link
            v-for="item in navItems.slice(0, 4)"
            :key="item.text"
            :to="item.link"
            :class="{
              'header__nav-item': true,
              'is-active': currentRoute === item.link
            }"
            @click="closeMobileMenu"
          >
            <img
              v-if="item.icon"
              :src="item.icon"
              alt=""
              class="header__icon"
            />
            {{ item.text }}
          </router-link>
        </div>
        <div class="header__nav-row">
          <router-link
            v-for="item in navItems.slice(4)"
            :key="item.text"
            :to="item.link"
            :class="{
              'header__nav-item': true,
              'is-active': currentRoute === item.link
            }"
            @click="closeMobileMenu"
          >
            <img
              v-if="item.icon"
              :src="item.icon"
              alt=""
              class="header__icon"
            />
            {{ item.text }}
          </router-link>
        </div>
      </nav>

      <div class="header__right" v-if="!isLogin()">
        <router-link
          v-for="button in actionButtons"
          :key="button.text"
          :to="button.link"
          class="header__button"
        >
          {{ button.text }}
        </router-link>
      </div>
      <div class="header__right" v-else>
        <img :src="userAvatar" alt="User Avatar" class="header__avatar" />
        <router-link
          v-for="button in me"
          :key="button.text"
          :to="button.link"
          class="header__button"
        >
          {{ button.text }}
        </router-link>
      </div>
    </div>
  </header>
</template>

<script setup>
import { isLogin } from '@/stores'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const navItems = [
  { text: '首页', link: '/main/index' },
  { text: '推荐', link: '/recommend/index' },
  { text: '搜索·公司', link: '/search/index' },
  { text: '校园·海归', link: '#' },
  { text: '小程序', link: '/applet/index' },
  { text: '职友AI', link: '/aibot/index' },
  { text: '职星会客厅', link: '/dynamic/index' },
  { text: '知识星辰阁', link: '/learning/index' }
]

const actionButtons = [
  { text: '我要招聘', link: '/login' },
  { text: '我要找工作', link: '/login' },
  { text: '登录/注册', link: '/login' }
]

const me = [{ text: '我的', link: '/me' }]

const currentRoute = computed(() => route.path)

const isMobileMenuOpen = ref(false)
const userAvatar = ref('/path/to/default-avatar.png') // Replace with actual default avatar path

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}

// City selection
const cities = ['广州', '北京', '上海', '深圳', '杭州', '成都']
const selectedCity = ref('广州')
const showCitySelector = ref(false)

const toggleCitySelector = () => {
  showCitySelector.value = !showCitySelector.value
}

const selectCity = (city) => {
  selectedCity.value = city
  showCitySelector.value = false
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  width: 100%;
  margin: 0;
  padding: 0;
  align-items: center;
  z-index: 1000;

  &__container {
    height: 50px;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    margin: auto;
    position: relative;
  }

  &__left,
  &__right {
    display: flex;
    align-items: center;
  }

  &__logo {
    color: #409eff;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 1.5rem;
  }

  &__location {
    display: flex;
    align-items: center;
    color: #409eff;
    cursor: pointer;
    transition: color 0.3s ease;
    margin-right: 1rem;
    position: relative;

    &:hover {
      color: #fa9797;
    }
  }

  &__city-selector {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
  }

  &__city-option {
    padding: 8px 16px;
    cursor: pointer;

    &:hover {
      background-color: #f5f5f5;
    }
  }

  &__nav {
    display: flex;
    gap: 1rem;
    flex-grow: 1;
  }

  &__nav-row {
    display: flex;
    gap: 1rem;
  }

  &__nav-item {
    color: #606266;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.3s ease;

    &:hover,
    &.is-active {
      color: #409eff;
    }
  }

  &__button {
    background-color: #ffffff;
    color: #606266;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;

    &:hover {
      background-color: #eee;
    }
  }

  &__icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
  }

  &__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    margin-right: 0.5rem;
  }

  &__mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;

    span {
      width: 2rem;
      height: 0.25rem;
      background: #606266;
      border-radius: 10px;
      transition: all 0.3s linear;
      position: relative;
      transform-origin: 1px;
    }
  }

  @media (max-width: 768px) {
    &__container {
      flex-wrap: wrap;
    }

    &__nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      background-color: #fff;
      padding: 1rem;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      display: none;

      &--open {
        display: flex;
      }
    }

    &__nav-row {
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 0.5rem;
    }

    &__nav-item {
      flex-basis: 48%;
      margin-bottom: 0.5rem;
    }

    &__mobile-toggle {
      display: flex;
    }

    &__right {
      margin-left: auto;
    }
  }
}
</style> -->

<template>
  <header class="header">
    <div class="header__container">
      <div class="header__left">
        <h1 class="header__logo">职为你来</h1>
        <div class="header__location" @click="toggleCitySelector">
          <img src="@/assets/wxlg.png" alt="Location" class="header__icon" />
          <span>{{ selectedCity }}</span>
          <div v-if="showCitySelector" class="header__city-selector">
            <div
              v-for="city in cities"
              :key="city"
              @click="selectCity(city)"
              class="header__city-option"
            >
              {{ city }}
            </div>
          </div>
        </div>
      </div>

      <button
        class="header__mobile-toggle"
        @click="toggleMobileMenu"
        aria-label="Toggle menu"
      >
        <span></span>
        <span></span>
        <span></span>
      </button>

      <nav
        class="header__nav"
        :class="{ 'header__nav--open': isMobileMenuOpen }"
      >
        <div class="header__nav-row">
          <router-link
            v-for="item in navItems.slice(0, 4)"
            :key="item.text"
            :to="item.link"
            :class="{
              'header__nav-item': true,
              'is-active': currentRoute === item.link
            }"
            @click="closeMobileMenu"
          >
            <img
              v-if="item.icon"
              :src="item.icon"
              alt=""
              class="header__icon"
            />
            {{ item.text }}
          </router-link>
        </div>
        <div class="header__nav-row">
          <router-link
            v-for="item in navItems.slice(4)"
            :key="item.text"
            :to="item.link"
            :class="{
              'header__nav-item': true,
              'is-active': currentRoute === item.link
            }"
            @click="closeMobileMenu"
          >
            <img
              v-if="item.icon"
              :src="item.icon"
              alt=""
              class="header__icon"
            />
            {{ item.text }}
          </router-link>
        </div>
      </nav>
      <div class="header__right" v-if="userInfo && userInfo.name">
        <img
          :src="userAvatar"
          alt="User Avatar"
          class="header__avatar"
          @click="goToMe"
        />
        <router-link
          v-for="button in me"
          :key="button.text"
          :to="button.link"
          class="header__button"
        >
          <!-- {{ button.text }} -->
          {{ userInfo.name }}
        </router-link>
      </div>
      <div class="header__right" v-else>
        <router-link
          v-for="button in actionButtons"
          :key="button.text"
          :to="button.link"
          class="header__button"
        >
          {{ button.text }}
        </router-link>
      </div>
    </div>
  </header>
</template>

<script setup>
import { isLogin } from '@/stores'
import { computed, ref, onMounted, onUnmounted, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router'
import { useUserStore, getToken } from '@/stores'
import { getUserInfo } from '@/api/user'

const store = useUserStore()
const userInfo = ref()
const userStore = getToken()
const route = useRoute()
// console.log(userInfo)
const navItems = [
  { text: '首页', link: '/main/index' },
  { text: '推荐', link: '/recommend/index' },
  { text: '搜索·公司', link: '/search/index' },
  { text: '校园·海归', link: '#' },
  { text: '小程序', link: '/applet/index' },
  { text: '职友AI', link: '/aibot/index' },
  { text: '职星会客厅', link: '/dynamic/index' },
  { text: '知识星辰阁', link: '/learning/index' }
]

const actionButtons = [
  { text: '我要招聘', link: '/login' },
  { text: '我要找工作', link: '/login' },
  { text: '登录/注册', link: '/login' }
]

const me = [{ text: '我的', link: '/me' }]
const goToMe = () => {
  router.push('/me')
}
const currentRoute = computed(() => route.path)

const isMobileMenuOpen = ref(false)
const userAvatar = ref('https://wlmtsys.com:9000/huihui/7.jpg') // Replace with actual default avatar path

const toggleMobileMenu = (event) => {
  event.stopPropagation()
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}

// City selection
const cities = ['广州', '北京', '上海', '深圳', '杭州', '成都']
const selectedCity = ref('广州')
const showCitySelector = ref(false)
const toggleCitySelector = (event) => {
  event.stopPropagation()
  showCitySelector.value = !showCitySelector.value
}

const selectCity = (city) => {
  selectedCity.value = city
  showCitySelector.value = false
}

const handleOutsideClick = (event) => {
  if (
    !event.target.closest('.header__location') &&
    !event.target.closest('.header__mobile-toggle') &&
    !event.target.closest('.header__nav')
  ) {
    showCitySelector.value = false
    isMobileMenuOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleOutsideClick)
})

onUnmounted(() => {
  document.removeEventListener('click', handleOutsideClick)
})
onBeforeMount(async () => {
  // 尝试获取用户信息
  /* eslint-disable */
  const ui = store.getUserInfo
  /* eslint-enable */
  console.log(ui + 'kk')
  if (!ui) {
    if (await isLogin()) {
      let res = await getUserInfo()
      if (res.code === 200 && !!res.data) {
        userInfo.value = res.data
        console.log(res.data)
        // 记录到store 并调转到首页
        store.setUserInfo(res.data)
      }
    } else {
      userStore.logout()
    }
  } else {
    userInfo.value = ui
  }
})
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  width: 100%;
  margin: 0;
  padding: 0;
  align-items: center;
  z-index: 1000;

  &__container {
    height: 50px;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    margin: auto;
    position: relative;
  }

  &__left,
  &__right {
    display: flex;
    align-items: center;
  }

  &__logo {
    color: #409eff;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 1.5rem;
  }

  &__location {
    display: flex;
    align-items: center;
    color: #409eff;
    cursor: pointer;
    transition: color 0.3s ease;
    margin-right: 1rem;
    position: relative;

    &:hover {
      color: #fa9797;
    }
  }

  &__city-selector {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
  }

  &__city-option {
    padding: 8px 16px;
    cursor: pointer;

    &:hover {
      background-color: #f5f5f5;
    }
  }

  &__nav {
    display: flex;
    gap: 1rem;
    flex-grow: 1;
  }

  &__nav-row {
    display: flex;
    gap: 1rem;
  }

  &__nav-item {
    color: #606266;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.3s ease;

    &:hover,
    &.is-active {
      color: #409eff;
    }
  }

  &__button {
    background-color: #ffffff;
    color: #606266;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;

    &:hover {
      background-color: #eee;
    }
  }

  &__icon {
    width: 2rem;
    height: 1rem;
    margin-right: 0.25rem;
  }

  &__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    margin-right: 0.5rem;
  }

  &__mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;

    span {
      width: 2rem;
      height: 0.25rem;
      background: #606266;
      border-radius: 10px;
      transition: all 0.3s linear;
      position: relative;
      transform-origin: 1px;
    }
  }

  @media (max-width: 768px) {
    &__container {
      flex-wrap: wrap;
    }

    &__nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      background-color: #fff;
      padding: 1rem;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      display: none;

      &--open {
        display: flex;
      }
    }

    &__nav-row {
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 0.5rem;
    }

    &__nav-item {
      flex-basis: 48%;
      margin-bottom: 0.5rem;
    }

    &__mobile-toggle {
      display: flex;
    }

    &__right {
      margin-left: auto;
    }
  }
}
</style>
